/**
 * 刷新&预览 点击事件
 */
{
    /**
     * 刷新按钮点击事件
     */
    document.querySelector("#refresh_btn").onclick = function () {
        location.reload(true);
    };
    /**
     * 预览简历按钮点击事件
     */
    document.querySelector("#preview_btn").onclick = function () {
        window.location.href = "../resumePreview/resumePreview.html";
    };
}

/**
 * 编辑 删除 保存 取消 添加
 */
{
    /**
     * 删除按钮元素节点
     * @returns {HTMLDivElement} 编辑按钮元素节点
     */
    function deleteBtn() {
        let element = document.createElement("div");
        element.className = "delete_btn";
        element.setAttribute("onclick", "deleteClick(this)");
        return element;
    }

    /**
     * 删除点击事件操作
     */
    function deleteClick(e) {
        // 向数据库发送删除条目请求
        let ele = e;
        ele.parentElement.parentElement.removeChild(ele.parentElement);
        // 其他编辑按钮可用
        let prevEditBtns = document.querySelectorAll(".edit_btn");
        for (let eb of prevEditBtns) {
            eb.style.backgroundImage = "url(../images/createResume/edit_icon.svg)";
            eb.setAttribute("onclick", "editClick(this)");
        }
        // 其他删除按钮可用
        let prevDelBtns = document.querySelectorAll(".delete_btn");
        for (let db of prevDelBtns) {
            db.style.backgroundImage = "url(../images/createResume/delete.svg)";
            db.setAttribute("onclick", "deleteClick(this)");
        }
    }


    /**
     * 编辑按钮元素节点
     * @returns {HTMLDivElement} 编辑按钮元素节点
     */
    function editBtn() {
        let element = document.createElement("div");
        element.className = "edit_btn";
        element.setAttribute("onclick", "editClick(this)");
        return element;
    }

    /**
     * 编辑点击事件操作
     */
    function editClick(e) {
        editFunction(e);
    }


    /**
     * 保存&取消按钮元素节点
     * @returns {HTMLDivElement} 编辑按钮元素节点
     */
    function saveCancelBtn() {
        let element = document.createElement("div");
        element.className = "btn_box";
        element.innerHTML = `<button onclick="saveClick(this)">保存</button>
                            <button onclick="cancelClick(this)">取消</button>`;
        return element;
    }

    function saveCancelBtn2() {
        let element = document.createElement("div");
        element.className = "btn_box";
        element.innerHTML = `<button onclick="saveClick(this)">保存</button>
                            <button onclick="deleteClick(this.parentElement)">取消</button>`;
        return element;
    }

    /**
     * 保存点击事件操作
     */
    function saveClick(e) {
        prevFunction(e);
        // 向数据库发送修改条目请求
    }

    /**
     * 取消点击事件操作
     */
    function cancelClick(e) {
        prevFunction(e);
    }


    /**
     * 添加点击事件操作
     */
    function addClick(e) {
        addFunction(e);
    }


    /**
     * 获得技能掌握程度的类名
     * @param skillLabel 技能掌握程度名
     * @returns {string} 类名
     */
    function getSkillClass(skillLabel) {
        switch (skillLabel) {
            case "一般":
                return "progressBar_type4";
            case "良好":
                return "progressBar_type3";
            case "熟练":
                return "progressBar_type2";
            case "精通":
                return "progressBar_type1";
        }
    }

    /**
     * 创建容器
     * @param type 类型(0-删除按钮，1-编辑按钮，2-删除&编辑按钮，3-保存&取消按钮)
     * @param content 容器内需要添加的其他内容
     * @returns {HTMLDivElement} 容器元素节点
     */
    function createContentElement(type, content) {
        let element = document.createElement("div");
        element.className = "content";
        element.innerHTML += content;
        if (type === 0) {
            element.appendChild(deleteBtn());
        } else if (type === 1) {
            element.appendChild(editBtn());
        } else if (type === 2) {
            element.appendChild(editBtn());
            element.appendChild(deleteBtn());
        }
        return element;
    }

    /**
     * 添加按钮
     * @param type 类型(0-删除按钮，1-编辑按钮，2-删除&编辑按钮，3-保存&取消按钮)
     * @param content 容器内需要添加的其他内容
     * @param element 需要添加按钮的元素节点
     * @returns {HTMLDivElement} 容器元素节点
     */
    function addContentElement(type, content, element) {
        if (element === null) {
            element = document.createElement("div");
            element.className = "content";
        }
        element.innerHTML = content;
        if (type === 0) {
            element.appendChild(deleteBtn());
        } else if (type === 1) {
            element.appendChild(editBtn());
        } else if (type === 2) {
            element.appendChild(editBtn());
            element.appendChild(deleteBtn());
        } else if (type === 3) {
            element.appendChild(saveCancelBtn());
        } else if (type === 4) {
            element.appendChild(saveCancelBtn2());
        }
        return element;
    }
}

/**
 * init 初始化
 */
{
    // 定义初始化函数
    function initBasic() {
        let div_basic = document.querySelector("#basic");
        div_basic.innerHTML = ``;
        let content = `<div class="oh">
                            <div class="float_l">
                                <img src="../images/createResume/basic_face.png" alt="用户头像" id="face">
                            </div>
                            <div class="float_l oh">
                                <h2>username123</h2>
                                <p class="at">
                                    <span>现居住地</span>
                                    <span>工作经验</span>
                                    <span>男</span>
                                    <span>50岁(2020-01-01)</span>
                                    <span>目前正在找工作</span>
                                </p>
                                <p class="tab">
                                    <img src="../images/createResume/email.png" alt="">
                                    <span>13311112222@111.com</span>
                                    <img src="../images/createResume/tel.png" alt="">
                                    <span>13311112222</span>
                                </p>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="float_l item_type1">
                                <label>目前年收入</label>
                                <span>10000元</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>证件号</label>
                                <span>111222202001019999</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="float_l item_type1">
                                <label>期望薪资</label>
                                <span>8000-9999元/月</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>工作类型</label>
                                <span>全职</span>
                            </div>
                        </div>`;
        div_basic.appendChild(createContentElement(1, content));
    }

    function initCareer() {
        let div_career = document.querySelector("#career");
        div_career.innerHTML = `<h4 class="tag_title">
                        <img src="../images/createResume/career.svg" class="icon">
                        <strong>求职意向</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        let content = `<div class="oh">
                            <div class="float_l item_type1">
                                <label>期望薪资</label>
                                <span>1000-2222元/月</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>地点</label>
                                <span>苏州</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="float_l item_type1">
                                <label>职能/职位</label>
                                <span>Web前端开发 Java开发工程师</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>行业</label>
                                <span>互联网/电子商务 计算机软件</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="float_l item_type1">
                                <label>到岗时间</label>
                                <span>3个月内</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>工作类型</label>
                                <span>全职</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>自我评价</label>
                                <span>学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程学习能力强，热爱编程</span>
                            </div>
                        </div>`;
        div_career.appendChild(createContentElement(1, content));
    }

    function initWork() {
        let div_work = document.querySelector("#work");
        div_work.innerHTML = `<h4 class="tag_title">
                        <img src="../images/createResume/work.svg" class="icon">
                        <strong>工作经验</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        for (let i = 0; i < 2; i++) {
            let content = `<div class="oh">
                            <div class="time_item">
                                <span>2018/12-2019/12</span>
                                <strong>山东凤祥股份有限公司</strong>
                                <strong>包装设计专员</strong>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2 at">
                                <span>快速消费品(食品、饮料、化妆品)</span>
                                <span>10000人以上</span>
                                <span>民营公司</span>
                                <span>研发中心</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>工作描述</label>
                                <span>主要负责包装版面的设计、包装尺寸及材质的确认</span>
                            </div>
                        </div>`;
            div_work.appendChild(createContentElement(2, content));
        }
    }

    function initProject() {
        let div_project = document.querySelector("#project");
        div_project.innerHTML = ` <h4 class="tag_title">
                        <img src="../images/createResume/project.svg" class="icon">
                        <strong>项目经验</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        for (let i = 0; i < 2; i++) {
            let content = `<div class="oh">
                            <div class="time_item">
                                <span>2018/12-2019/12</span>
                                <strong>山东凤祥股份有限公司</strong>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>项目名称</label>
                                <span>具体的项目名称</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>项目描述</label>
                                <span>主要负责包装版面的设计、包装尺寸及材质的确认</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>责任描述</label>
                                <span>主要负责包装版面的设计、包装尺寸及材质的确认</span>
                            </div>
                        </div>`;
            div_project.appendChild(createContentElement(2, content));
        }
    }

    function initEducation() {
        let div_education = document.querySelector("#education");
        div_education.innerHTML = `<h4 class="tag_title">
                        <img src="../images/createResume/education.svg" class="icon">
                        <strong>教育经历</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        for (let i = 0; i < 2; i++) {
            let content = `<div class="oh">
                            <div class="time_item">
                                <span>2018/12-2019/12</span>
                                <strong>清华大学(本科)</strong>
                                <strong>金融学</strong>
                            </div>
                        </div>`;
            div_education.appendChild(createContentElement(2, content));
        }
    }

    function initSkills() {
        let div_skills = document.querySelector("#skills");
        div_skills.innerHTML = `<h4 class="tag_title">
                        <img src="../images/createResume/skills.svg" class="icon">
                        <strong>专业技能</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        for (let i = 0; i < 2; i++) {
            let skillName = "Illustrator";
            let skillLabel = "熟练";
            let skillClass = getSkillClass(skillLabel);
            let content = `<div class="oh">
                            <div class="item_type2">
                                <label>
                                    <strong>${skillName}</strong>
                                </label>
                                <div class="progressBar ${skillClass}">
                                    <div></div>
                                </div>
                            </div>
                        </div>`;
            div_skills.appendChild(createContentElement(2, content));
        }
    }

    function initSchoolHonor() {
        let div_schoolHonor = document.querySelector("#schoolHonor");
        div_schoolHonor.innerHTML = `<h4 class="tag_title">
                        <img src="../images/createResume/schoolHonor.svg" class="icon">
                        <strong>在校荣誉</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        for (let i = 0; i < 2; i++) {
            let content = `<div class="oh">
                            <div class="time_item">
                                <span>2010/6</span>
                                <strong>获得的奖项名称</strong>
                                <span>获奖级别</span>
                            </div>
                        </div>`;
            div_schoolHonor.appendChild(createContentElement(2, content));
        }
    }

    function initDescription() {
        let div_description = document.querySelector("#description");
        div_description.innerHTML = `<h4 class="tag_title">
                        <img src="../images/createResume/description.svg" class="icon">
                        <strong>自我描述</strong>
                        <span class="add_content" onclick="addClick(this)">+添加</span>
                    </h4>`;
        let content = `<div class="oh">
                            <div class="item_type2">
                                <label>主题</label>
                                <span>职业描述</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>主题描述</label>
                                <span>职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述职业描述</span>
                            </div>
                        </div>`;
        div_description.appendChild(createContentElement(2, content));
    }
}
{
    initBasic();
    // initCareer();
    initWork();
    initProject();
    // initEducation();
    initSkills();
    initSchoolHonor();
    // initDescription();
}


/**
 * edit 编辑界面
 */
{
    function editBasic(e) {
        let content = `<div class="oh">
                            <div class="float_l">
                                <img src="../images/createResume/basic_face.png" alt="用户头像" id="face">
                            </div>
                            <div class="float_l oh">
                                <div class="oh">
                                    <div class="float_l item_type1">
                                        <label>姓名</label>
                                        <input type="text" value="10000元">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>出生日期</label>
                                        <input type="text" value="111222202001019999">
                                    </div>
                                </div>
                                <div class="oh">
                                    <div class="float_l item_type1">
                                        <label>手机号</label>
                                        <input type="text" value="10000元">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>邮箱</label>
                                        <input type="text" value="111222202001019999">
                                    </div>
                                </div>
                                <div class="oh">
                                    <div class="float_l item_type1">
                                        <label>性别</label>
                                        <input type="hidden">
                                        <select name="" id="">
                                            <option value="M">请选择</option>
                                            <option value="M">男</option>
                                            <option value="F">女</option>
                                        </select>
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>求职状态</label>
                                        <input type="hidden">
                                        <select name="" id="">
                                            <option value="">请选择</option>
                                            <option value="">目前正在找工作</option>
                                            <option value="">观望有机会会考虑</option>
                                            <option value="">我目前不想换工作</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="oh">
                                    <div class="float_l item_type1">
                                        <label>居住地</label>
                                        <input type="text" value="10000元">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>身份证号</label>
                                        <input type="text" value="111222202001019999">
                                    </div>
                                </div>
                                <div class="oh">
                                    <div class="float_l item_type1">
                                        <label>年收入</label>
                                        <input type="text" value="10000元">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>工作类型</label>
                                        <input type="hidden">
                                        <select name="" id="">
                                            <option value="">请选择</option>
                                            <option value="">全职</option>
                                            <option value="">兼职</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="oh">
                                    <div class="float_l item_type1">
                                        <label>工作状态</label>
                                        <input type="text" value="10000元">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>期望薪资</label>
                                        <input type="text" value="111222202001019999">
                                    </div>
                                </div>
                            </div>
                        </div>`;
        addContentElement(3, content, e);
    }

    function editWork(e) {
        let content = `<div class="oh">
                                    <div class="float_l item_type1">
                                        <label>开始时间</label>
                                        <input type="date" value="2019-01-01">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>结束时间</label>
                                        <input type="date" value="2020-02-02">
                                    </div>
                                </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>公司</label>
                               <input type="text" value="山东凤祥股份有限公司">
                           </div>
                           <div class="float_l item_type1">
                               <label>职位</label>
                               <input type="text" value="111222202001019999">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>部门名称</label>
                               <input type="text" value="10000元">
                           </div>
                           <div class="float_l item_type1">
                               <label>公司规模</label>
                               <input type="text" value="111222202001019999">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>公司性质</label>
                               <input type="text" value="私营企业">
                           </div>
                           <div class="float_l item_type1">
                               <label>经验类型</label>
                               <input type="text" value="快速消费品(食品、饮料、化妆品)">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type2">
                               <label>工作描述</label>
                               <input type="hidden" value="">
                               <textarea name="work_desc" rows="3"></textarea>
                           </div>
                       </div>`;
        addContentElement(3, content, e);
    }

    function editProject(e) {
        let content = `<div class="oh">
                                    <div class="float_l item_type1">
                                        <label>开始时间</label>
                                        <input type="date" value="2019-01-01">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>结束时间</label>
                                        <input type="date" value="2020-02-02">
                                    </div>
                                </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>公司名称</label>
                               <input type="text" value="山东凤祥股份有限公司">
                           </div>
                           <div class="float_l item_type1">
                               <label>项目名称</label>
                               <input type="text" value="111222202001019999">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type2">
                               <label>项目描述</label>
                               <input type="hidden" value="">
                               <textarea name="work_desc" rows="3"></textarea>
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type2">
                               <label>责任描述</label>
                               <input type="hidden" value="">
                               <textarea name="work_desc" rows="3"></textarea>
                           </div>
                       </div>`;
        addContentElement(3, content, e);
    }

    function editSkills(e) {
        let content = `<div class="oh">
                           <div class="float_l item_type1">
                                <label>技能/语言</label>
                                <input type="text" value="山东凤祥股份有限公司">
                           </div>
                           <div class="float_l item_type1">
                                <label>掌握程度</label>
                                <input type="hidden">
                                <select name="" id="">
                                    <option value="">请选择</option>
                                    <option value="">一般</option>
                                    <option value="">良好</option>
                                    <option value="">熟练</option>
                                    <option value="">精通</option>
                                </select>
                           </div>
                       </div>`;
        addContentElement(3, content, e);
    }

    function editSchoolHonor(e) {
        let content = `<div class="oh">
                           <div class="float_l item_type1">
                               <label>时间</label>
                               <input type="date" value="2019-01-01">
                           </div>
                           <div class="float_l item_type1">
                               <label>奖项</label>
                               <input type="text" value="2020-02-02">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>级别</label>
                               <input type="text" value="山东凤祥股份有限公司">
                           </div>
                       </div>`;
        addContentElement(3, content, e);
    }
}

function editFunction(e) {
    let editName = e.parentElement.parentElement.id;
    let contentEle = e.parentElement;
    switch (editName) {
        case "basic":
            editBasic(contentEle);
            break;
        case "work":
            editWork(contentEle);
            break;
        case "project":
            editProject(contentEle);
            break;
        case "skills":
            editSkills(contentEle);
            break;
        case "schoolHonor":
            editSchoolHonor(contentEle);
            break;
    }
    // 格式化label标签
    let inputs = document.querySelectorAll("input");
    for (let i of inputs) {
        if (i.previousElementSibling.nodeName.toLowerCase() === "label") {
            i.previousElementSibling.style.textAlign = "center";
        }
    }
    // 其他编辑按钮不可用
    let editBtns = document.querySelectorAll(".edit_btn");
    for (let eb of editBtns) {
        eb.style.backgroundImage = "url(../images/createResume/edit_icon2.svg)";
        eb.removeAttribute("onclick")
    }
    // 其他删除按钮不可用
    let delBtns = document.querySelectorAll(".delete_btn");
    for (let db of delBtns) {
        db.style.backgroundImage = "url(../images/createResume/delete2.svg)";
        db.removeAttribute("onclick")
    }
}

/**
 * add 添加界面
 */
{
    function addWork() {
        return `<div class="oh">
                                    <div class="float_l item_type1">
                                        <label>开始时间</label>
                                        <input type="date" value="2019-01-01">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>结束时间</label>
                                        <input type="date" value="2020-02-02">
                                    </div>
                                </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>公司</label>
                               <input type="text" value="山东凤祥股份有限公司">
                           </div>
                           <div class="float_l item_type1">
                               <label>职位</label>
                               <input type="text" value="111222202001019999">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>部门名称</label>
                               <input type="text" value="10000元">
                           </div>
                           <div class="float_l item_type1">
                               <label>公司规模</label>
                               <input type="text" value="111222202001019999">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>公司性质</label>
                               <input type="text" value="私营企业">
                           </div>
                           <div class="float_l item_type1">
                               <label>经验类型</label>
                               <input type="text" value="快速消费品(食品、饮料、化妆品)">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type2">
                               <label>工作描述</label>
                               <input type="hidden" value="">
                               <textarea name="work_desc" rows="3"></textarea>
                           </div>
                       </div>`;
    }

    function addProject() {
        return `<div class="oh">
                                    <div class="float_l item_type1">
                                        <label>开始时间</label>
                                        <input type="date" value="2019-01-01">
                                    </div>
                                    <div class="float_l item_type1">
                                        <label>结束时间</label>
                                        <input type="date" value="2020-02-02">
                                    </div>
                                </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>公司名称</label>
                               <input type="text" value="山东凤祥股份有限公司">
                           </div>
                           <div class="float_l item_type1">
                               <label>项目名称</label>
                               <input type="text" value="111222202001019999">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type2">
                               <label>项目描述</label>
                               <input type="hidden" value="">
                               <textarea name="work_desc" rows="3"></textarea>
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type2">
                               <label>责任描述</label>
                               <input type="hidden" value="">
                               <textarea name="work_desc" rows="3"></textarea>
                           </div>
                       </div>`;
    }

    function addSkills() {
        return `<div class="oh">
                           <div class="float_l item_type1">
                                <label>技能/语言</label>
                                <input type="text" value="山东凤祥股份有限公司">
                           </div>
                           <div class="float_l item_type1">
                                <label>掌握程度</label>
                                <input type="hidden">
                                <select name="" id="">
                                    <option value="">请选择</option>
                                    <option value="">一般</option>
                                    <option value="">良好</option>
                                    <option value="">熟练</option>
                                    <option value="">精通</option>
                                </select>
                           </div>
                       </div>`;
    }

    function addSchoolHonor() {
        return `<div class="oh">
                           <div class="float_l item_type1">
                               <label>时间</label>
                               <input type="date" value="2019-01-01">
                           </div>
                           <div class="float_l item_type1">
                               <label>奖项</label>
                               <input type="text" value="2020-02-02">
                           </div>
                       </div>
                       <div class="oh">
                           <div class="float_l item_type1">
                               <label>级别</label>
                               <input type="text" value="山东凤祥股份有限公司">
                           </div>
                       </div>`;
    }
}

function addFunction(e) {
    let addName = e.parentElement.parentElement.id;
    let tagTitleEle = e.parentElement;
    console.log(tagTitleEle);
    let innerContent;
    switch (addName) {
        case "work":
            innerContent = addWork(tagTitleEle);
            break;
        case "project":
            innerContent = addProject(tagTitleEle);
            break;
        case "skills":
            innerContent = addSkills(tagTitleEle);
            break;
        case "schoolHonor":
            innerContent = addSchoolHonor(tagTitleEle);
            break;
    }

    let contentElement = addContentElement(4, innerContent, null);
    if (tagTitleEle.parentElement.lastChild === tagTitleEle) {
        tagTitleEle.parentElement.appendChild(contentElement);
    } else {
        tagTitleEle.parentElement.insertBefore(contentElement, tagTitleEle.nextSibling);
    }

    // 格式化label标签
    let inputs = document.querySelectorAll("input");
    for (let i of inputs) {
        if (i.previousElementSibling.nodeName.toLowerCase() === "label") {
            i.previousElementSibling.style.textAlign = "center";
        }
    }
    // 其他编辑按钮不可用
    let editBtns = document.querySelectorAll(".edit_btn");
    for (let eb of editBtns) {
        eb.style.backgroundImage = "url(../images/createResume/edit_icon2.svg)";
        eb.removeAttribute("onclick")
    }
    // 其他删除按钮不可用
    let delBtns = document.querySelectorAll(".delete_btn");
    for (let db of delBtns) {
        db.style.backgroundImage = "url(../images/createResume/delete2.svg)";
        db.removeAttribute("onclick")
    }
}

/**
 * prev 预览界面
 */
{
    function prevBasic(e) {
        let content = `<div class="oh">
                            <div class="float_l">
                                <img src="../images/createResume/basic_face.png" alt="用户头像" id="face">
                            </div>
                            <div class="float_l oh">
                                <h2>username123</h2>
                                <p class="at">
                                    <span>现居住地</span>
                                    <span>工作经验</span>
                                    <span>男</span>
                                    <span>50岁(2020-01-01)</span>
                                    <span>目前正在找工作</span>
                                </p>
                                <p class="tab">
                                    <img src="../images/createResume/email.png" alt="">
                                    <span>13311112222@111.com</span>
                                    <img src="../images/createResume/tel.png" alt="">
                                    <span>13311112222</span>
                                </p>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="float_l item_type1">
                                <label>目前年收入</label>
                                <span>10000元</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>证件号</label>
                                <span>111222202001019999</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="float_l item_type1">
                                <label>期望薪资</label>
                                <span>8000-9999元/月</span>
                            </div>
                            <div class="float_l item_type1">
                                <label>工作类型</label>
                                <span>全职</span>
                            </div>
                        </div>`;
        addContentElement(1, content, e);
    }

    function prevWork(e) {
        let content = `<div class="oh">
                            <div class="time_item">
                                <span>2018/12-2019/12</span>
                                <strong>山东凤祥股份有限公司</strong>
                                <strong>包装设计专员</strong>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2 at">
                                <span>快速消费品(食品、饮料、化妆品)</span>
                                <span>10000人以上</span>
                                <span>民营公司</span>
                                <span>研发中心</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>工作描述</label>
                                <span>主要负责包装版面的设计、包装尺寸及材质的确认</span>
                            </div>
                        </div>`;
        addContentElement(2, content, e);
    }

    function prevProject(e) {
        let content = `<div class="oh">
                            <div class="time_item">
                                <span>2018/12-2019/12</span>
                                <strong>山东凤祥股份有限公司</strong>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>项目名称</label>
                                <span>具体的项目名称</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>项目描述</label>
                                <span>主要负责包装版面的设计、包装尺寸及材质的确认</span>
                            </div>
                        </div>
                        <div class="oh">
                            <div class="item_type2">
                                <label>责任描述</label>
                                <span>主要负责包装版面的设计、包装尺寸及材质的确认</span>
                            </div>
                        </div>`;
        addContentElement(2, content, e);
    }

    function prevSkills(e) {
        let skillName = "Illustrator";
        let skillLabel = "熟练";
        let skillClass = getSkillClass(skillLabel);
        let content = `<div class="oh">
                            <div class="item_type2">
                                <label>
                                    <strong>${skillName}</strong>
                                </label>
                                <div class="progressBar ${skillClass}">
                                    <div></div>
                                </div>
                            </div>
                        </div>`;
        addContentElement(2, content, e);
    }

    function prevSchoolHonor(e) {
        let content = `<div class="oh">
                            <div class="time_item">
                                <span>2010/6</span>
                                <strong>获得的奖项名称</strong>
                                <span>获奖级别</span>
                            </div>
                        </div>`;
        addContentElement(2, content, e);
    }
}

function prevFunction(e) {
    let prevName = e.parentElement.parentElement.parentElement.id;
    let contentEle = e.parentElement.parentElement;
    switch (prevName) {
        case "basic":
            prevBasic(contentEle);
            break;
        case "work":
            prevWork(contentEle);
            break;
        case "project":
            prevProject(contentEle);
            break;
        case "skills":
            prevSkills(contentEle);
            break;
        case "schoolHonor":
            prevSchoolHonor(contentEle);
            break;
    }
    // 其他编辑按钮可用
    let prevEditBtns = document.querySelectorAll(".edit_btn");
    for (let eb of prevEditBtns) {
        eb.style.backgroundImage = "url(../images/createResume/edit_icon.svg)";
        eb.setAttribute("onclick", "editClick(this)");
    }
    // 其他删除按钮可用
    let prevDelBtns = document.querySelectorAll(".delete_btn");
    for (let db of prevDelBtns) {
        db.style.backgroundImage = "url(../images/createResume/delete.svg)";
        db.setAttribute("onclick", "deleteClick(this)");
    }
}







